import React from 'react'
import {Row, Icon} from 'antd';
import moment from 'moment'
import './index.less'
export default class YearPicker extends React.PureComponent{
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || moment(new Date()).format('YYYY'),
      isopen: props.isOpen || false,
      popPositionLeft: true,
      showCurrentPageYears: this.get12Years(props.value || moment(new Date()).format('YYYY'))
    }
  }
  // 设置不可选择的日期范围
  isDisabled = (year) => {
    if (this.props.disabledDate) {
      return this.props.disabledDate(year);
    } else {
      return false
    }
  }
  // 上一页
  preYears = () => {
    const arr = [this.state.showCurrentPageYears[0]-10, this.state.showCurrentPageYears[1]-10];
    this.setState({
      showCurrentPageYears: arr
    })
  }
  // 下一页
  afterYears = () => {
    const arr = [this.state.showCurrentPageYears[0]+10, this.state.showCurrentPageYears[1]+10];
    this.setState({
      showCurrentPageYears: arr
    })
  }
  // 获取当页12年
  get12Years(year) {
    const yu = year % 10;
    const beginYear = year-yu;
    const endYear = beginYear +9;
    return [beginYear, endYear]
  }
  // 选择年份的时候触发的事件
  handleSelect = (year, disabled) => {
    if(disabled) {
      return false;
    }
    if (year < this.state.showCurrentPageYears[0]) {
      this.preYears()
      return
    }
    if (year > this.state.showCurrentPageYears[1]) {
      this.afterYears();
      return
    }
    this.setState({
      value: year
    }, () => {
      // 给父组件返回值
      if (this.props.onDateChange) {
        this.props.onDateChange(year);
      }
    })
  }
  // 每一个年份对应的组件
  aspan = (a) => {
    const { value, showCurrentPageYears } = this.state;
    if (a === 1 || a === 12) {
      return <span className="yearPicker-pre"
        onClick={() => this.handleSelect(showCurrentPageYears[0]-2+a)}
      >
        {showCurrentPageYears[0] -2 + a}
      </span>
    }
    return <span className={this.isDisabled(showCurrentPageYears[0]-2+a) ? 'disabled' : +value === (showCurrentPageYears[0]-2+a) ? 'active' : ''}
      onClick={() => this.handleSelect(showCurrentPageYears[0]-2+a, this.isDisabled(showCurrentPageYears[0]-2+a))}
    >
      {showCurrentPageYears[0] -2 + a}
    </span>
  }
  render() {
    const { showCurrentPageYears } = this.state;
    return <div className="yeartPicker"
      style={{width: '100%'}}
    >
      <Row key="1">
        <Row className="yearTop">
          <span className="aleft"
            onClick={this.preYears}
          >
            <Icon type="double-left"/>
          </span>
          <span>{showCurrentPageYears[0]}-{showCurrentPageYears[1]}</span>
          <span className="aright"
            onClick={this.afterYears}
          >
            <Icon type="double-right"/>
          </span>
        </Row>
        <Row style={{padding: '10px 0'}}>
          <table>
            <tbody>
              <tr key="1">
                <td>
                  {this.aspan(1)}
                </td>
                <td>
                  {this.aspan(2)}
                </td>
                <td>
                  {this.aspan(3)}
                </td>
              </tr>
              <tr key="2">
                <td>
                  {this.aspan(4)}
                </td>
                <td>
                  {this.aspan(5)}
                </td>
                <td>
                  {this.aspan(6)}
                </td>
              </tr>
              <tr key="3">
                <td>
                  {this.aspan(7)}
                </td>
                <td>
                  {this.aspan(8)}
                </td>
                <td>
                  {this.aspan(9)}
                </td>
              </tr>
              <tr key="4">
                <td>
                  {this.aspan(10)}
                </td>
                <td>
                  {this.aspan(11)}
                </td>
                <td>
                  {this.aspan(12)}
                </td>
              </tr>
            </tbody>
          </table>
        </Row>
      </Row>
    </div>
  }
}